<template>
<div class="design-item-list" :class="{heightLight : current == titleForm.itemId}">
	<div class="design-title-wrap">
		<div class="design-title-h" :style="{'color':titleForm.color,'fontSize': titleForm.fontsize+'px','textAlign':  titleForm.location, 'lineHeight': (Number(titleForm.fontsize)+20)/Number(titleForm.fontsize)}">{{titleForm.title || "点击编辑【标题】" }}</div>
	</div>
	<div class="design-edit" v-show="(current == titleForm.itemId) && titleForm.toolbarEdit && !titleForm.toolbarComponents">
		<h4 class="edit-title"><span>标题</span></h4>
		<el-form :model="titleForm" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
			<el-form-item label="显示位置">
				<el-radio-group v-model="titleForm.location" @change="changeStatus(titleForm)">
					<el-radio label="left">居左</el-radio>
					<el-radio label="center">居中</el-radio>
					<el-radio label="right">居右</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="标题名称" prop="title">
				<el-input v-model="titleForm.title" placeholder="请输入标题名称"></el-input>
			</el-form-item>
			<el-form-item label="字体大小">
				<el-select v-model="titleForm.fontsize" @change="changeStatus(titleForm)">
					<el-option label="12" value="12"></el-option>
					<el-option label="14" value="14"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="选择颜色">
				<el-select v-model="titleForm.color" @change="changeStatus(titleForm)">
					<el-option label="#a6a6a6" value="#a6a6a6"></el-option>
					<el-option label="#333333" value="#333333"></el-option>
				</el-select>
			</el-form-item>
		</el-form>
	</div>
</div>
</template>

<script>
export default {
	data(){
		return {
			rules: {
				title: [
					{ required: true, message: '请输入标题名称', trigger: 'blur' },
				],
			},
		}
	},
	props:{
		titleForm: {
			type: Object,
			default() {
				return {}
			}
		},
		current: String
	},
	methods:{
		changeStatus(form){
			this.validateForm();
			this.$emit("childChange",form);
		},
		validateForm(){
			this.$refs.form.validate((valid) =>{
				if (valid){
					return true;
				}else{
					this.$notify.error({
						title: '错误',
						message: '请输入标题名称'
					});
					return false;
				} 
			})
		},
	},
}
</script>
<style lang="less" scoped>
@import "../../../../static/css/style.less";
</style>

